'use strict';
import React from 'react'
import { View, ScrollView, Text, Image, TouchableOpacity, Switch, TextInput } from 'react-native'
import { Metrics, Colors, Fonts } from '../Themes'
import { API, WINDOW } from '../Services'
import styles from './Styles/CommonContainerStyles'
import underscore from 'underscore'
import moment from 'moment'
import DateTimePickerModal from "react-native-modal-datetime-picker"
import Button from 'apsl-react-native-button'
import Modal from 'react-native-modal'

class DevicesSetScreen extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            type: '1',
            isDatePickerVisible: false,
            DatePickerMode: 'date',
            airCtrlInfo: null,

            sDate: moment().format('YYYY-MM-DD'),
            eDate: moment().format('YYYY-MM-DD'),
            sTime: '',
            eTime: '',
            datePickerType: 1,

            ruleInfo: null,
            isModalVisible: false,
            ruleInfoType: '',
        }
    }

    componentDidMount() {
        this.fetchData_getAirCtrlInfoBySceneId()
    }
    componentWillUnmount() {
        this.stopRepeat()
    }

    fetchData_getAirCtrlInfoBySceneId() {
        API.getAirCtrlInfoBySceneId(this.props.route.params.sceneId).then((response) => {
            const { ok, resultMessage, data } = response
            if (ok) {
                this.setState({ airCtrlInfo: data })
                if (underscore.isArray(data.month) && data.month.length > 0) {
                    this.setState({
                        sDate: moment(underscore.last(data.month)).format('YYYY-MM-DD'),
                        eDate: moment(underscore.first(data.month)).format('YYYY-MM-DD'),
                    })
                }
                this.setState({
                    sTime: moment(data.airRunInfo.beginTime, 'HH:mm').format('HH:mm'),
                    eTime: moment(data.airRunInfo.endTime, 'HH:mm').format('HH:mm'),
                })
            } else {
                return WINDOW.showToast(resultMessage)
            }
        })
    }

    doUpdate = () => {
        let month = this.getAllDays(new Date(this.state.sDate), new Date(this.state.eDate))
        month = month.map((element) => moment(element * (24 * 60 * 60 * 1000)).format('YYYY-MM-DD'))
        this.state.airCtrlInfo.month = month
        this.state.airCtrlInfo.airRunInfo.beginTime = this.state.sTime
        this.state.airCtrlInfo.airRunInfo.endTime = this.state.eTime
        API.updateAirRun(this.state.airCtrlInfo).then((response) => {
            const { ok, resultMessage } = response
            if (ok) {
                this.startRepeat()
                WINDOW.showToast('成功提交修改')
            } else {
                return WINDOW.showToast(resultMessage)
            }
        })
    }

    startRepeat() {
        this.timer = setInterval(
            () => {
                this._fetch_getAirCtrlStatusByAirRunId()
            },
            3000
        );
    }
    stopRepeat() {
        this.timer && clearInterval(this.timer);
    }
    _fetch_getAirCtrlStatusByAirRunId() {
        API.getAirCtrlStatusByAirRunId(this.state.airCtrlInfo.airRunInfo.id).then((response) => {
            const { ok, data } = response
            if (ok ) {
                if (data.runStatus === 2) {
                    this.props.navigation.goBack()
                }else{
                    WINDOW.showToast(data.runMsg)
                }
            } else {
                WINDOW.showToast('获取状态失败！')
                this.props.navigation.goBack()
            }
        })
    }


    /**
     * 获取2个时间点之间的所有日期
     * @param startDay
     * @param endDay
     */
    getAllDays(startDay, endDay) {
        console.log(startDay)
        console.log(endDay)
        if (startDay == null || endDay == null) {
            console.log("不能传入空值");
            return null;
        } else {
            var startDayIndex = Math.floor(startDay.getTime() / (24 * 60 * 60 * 1000));
            var endDayIndex = Math.floor(endDay.getTime() / (24 * 60 * 60 * 1000));
            var chazhi = Math.abs(startDayIndex - endDayIndex);
            var minValue = startDayIndex - endDayIndex >= 0 ? endDayIndex : startDayIndex;
            var result = [];
            if (chazhi > 0) {
                for (var i = 0; i <= chazhi; i++) {
                    result.push(minValue + i);
                }
            } else {
                result.push(minValue);
            }
            return result;
        }
    }


    showDatePicker = (mode, type) => {
        this.setState({ isDatePickerVisible: true, DatePickerMode: mode, datePickerType: type })
    }
    hideDatePicker = () => {
        this.setState({ isDatePickerVisible: false })
    }
    handleConfirm = date => {
        switch (this.state.datePickerType) {
            case 1:
                this.setState({ sDate: moment(date).format('YYYY-MM-DD') })
                break;
            case 2:
                this.setState({ eDate: moment(date).format('YYYY-MM-DD') })
                break;
            case 3:
                this.setState({ sTime: moment(date).format('HH:mm') })
                break;
            case 4:
                this.setState({ eTime: moment(date).format('HH:mm') })
                break;
            default:
                break;
        }
        this.hideDatePicker()
    }

    _renderHeader = () => {
        return (
            <View style={{ width: '100%' }}>
                <TouchableOpacity onPress={() => this.props.navigation.goBack()} style={{ flexDirection: "row", marginTop: 35, marginBottom:15, marginLeft: 35, alignItems: 'center' }}>
                    <Image source={require('../Images/back.png')} />
                    <Text style={{ fontSize: 40, color: 'white', marginLeft: 10 }}>设置</Text>
                </TouchableOpacity>


                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>

                    <TouchableOpacity onPress={() => this.setState({ type: '1' })} style={{ backgroundColor: this.state.type === '1' ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)', width: '45%', height: 50, justifyContent: 'center', alignItems: 'center', borderTopLeftRadius: 10, borderTopRightRadius: 10 }} >
                        <Text style={{ fontSize: 20, fontWeight: 'bold', color: this.state.type === '1' ? 'black' : 'white' }}>新风机</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={{ backgroundColor: this.state.type === '2' ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)', width: '45%', height: 50, justifyContent: 'center', alignItems: 'center', borderTopLeftRadius: 10, borderTopRightRadius: 10, marginLeft: 10 }} >
                        <Text style={{ fontSize: 20, fontWeight: 'bold', color: this.state.type === '2' ? 'black' : 'white' }}>空调</Text>
                    </TouchableOpacity>
                </View>

            </View>
        )
    }

    _change_runModel = (mode) => {
        this.setState((preState) => {
            preState.airCtrlInfo.airRunInfo.runModel = mode
            return { airCtrlInfo: preState.airCtrlInfo }
        })
    }
    _change_onOff = (value) => {
        this.setState((preState) => {
            let onOff = value ? 'ON' : 'OFF'
            preState.airCtrlInfo.airRunInfo.switchStatus = onOff
            console.log(preState.airCtrlInfo.airRunInfo)
            return { airCtrlInfo: preState.airCtrlInfo }
        })
    }
    _renderSection_one = () => {
        return (
            <View style={{ flex: 1, padding: 20 }}>
                <View style={{ flexDirection: "row", justifyContent: 'space-between', alignItems: 'center' }}>
                    <View style={{ flexDirection: "row", alignItems: 'center', marginBottom: 20 }}>
                        <Image source={require('../Images/icon_mssd.png')} />
                        <Text style={{ fontSize: 40, color: 'white', marginLeft: 10 }}>模式设定</Text>
                    </View>
                    <Switch value={this.state.airCtrlInfo.airRunInfo.switchStatus === 'ON'} onValueChange={(value) => this._change_onOff(value)} />
                </View>
                {(this.state.airCtrlInfo.airRunInfo.switchStatus === 'ON') && (
                    <View style={{ width: '100%', backgroundColor: 'white', borderRadius: 10, alignSelf: 'center' }} >
                        <View style={{ flexDirection: "row", width: '100%', height: 100, alignItems: 'center', paddingLeft: 20 }}>
                            <TouchableOpacity onPress={() => this._change_runModel('AUTO')} style={{ flexDirection: "row", marginRight: 30,alignItems:'center' }}>
                                <Image source={this.state.airCtrlInfo.airRunInfo.runModel === 'AUTO' ? require('../Images/check_sel.png') : require('../Images/check_unsel.png')} />
                                <Text style={{ fontSize: 40, marginLeft: 10 }}>自动</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this._change_runModel('MANUAL')} style={{ flexDirection: "row", marginRight: 30,alignItems:'center'  }}>
                                <Image source={this.state.airCtrlInfo.airRunInfo.runModel === 'MANUAL' ? require('../Images/check_sel.png') : require('../Images/check_unsel.png')} />
                                <Text style={{ fontSize: 40, marginLeft: 10 }}>手动</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this._change_runModel('CUSTOM')} style={{ flexDirection: "row", marginRight: 30,alignItems:'center'  }}>
                                <Image source={this.state.airCtrlInfo.airRunInfo.runModel === 'CUSTOM' ? require('../Images/check_sel.png') : require('../Images/check_unsel.png')} />
                                <Text style={{ fontSize: 40, marginLeft: 10 }}>定时</Text>
                            </TouchableOpacity>
                        </View>
                        {this.state.airCtrlInfo.airRunInfo.runModel === 'MANUAL' ? <View style={{ width: '100%', height: 1, backgroundColor: '#F7F7F7' }} /> : null}
                        {this.state.airCtrlInfo.airRunInfo.runModel === 'MANUAL' ? this._render_speed() : null}
                        {this.state.airCtrlInfo.airRunInfo.runModel === 'CUSTOM' ? <View style={{ width: '100%', height: 1, backgroundColor: '#F7F7F7' }} /> : null}
                        {this.state.airCtrlInfo.airRunInfo.runModel === 'CUSTOM' ? this._render_dingshi() : null}
                    </View>
                )}
            </View>
        )
    }


    _select_Gear = (value) => {
        this.setState((preState) => {
            preState.airCtrlInfo.airRunInfo.gear = value
            return { airCtrlInfo: preState.airCtrlInfo }
        })
    }
    _render_speed = () => {
        return (
            <View style={{ flexDirection: "row", width: '100%', height: 100, alignItems: 'center', paddingLeft: 20 }}>
                <TouchableOpacity onPress={() => this._select_Gear(1)} style={{ backgroundColor: this.state.airCtrlInfo.airRunInfo.gear === 1 ? Colors.mainColor : 'white', borderWidth: this.state.airCtrlInfo.airRunInfo.gear === 1 ? 0 : 1, borderColor: '#F7F7F7', width: 115, height: 40, justifyContent: 'center', alignItems: 'center', borderRadius: 5, marginRight: 30 }}>
                    <Text style={{ fontSize: 20 }}>低速</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this._select_Gear(2)} style={{ backgroundColor: this.state.airCtrlInfo.airRunInfo.gear === 2 ? Colors.mainColor : 'white', borderWidth: this.state.airCtrlInfo.airRunInfo.gear === 2 ? 0 : 1, borderColor: '#F7F7F7', width: 115, height: 40, justifyContent: 'center', alignItems: 'center', borderRadius: 5, marginRight: 30 }}>
                    <Text style={{ fontSize: 20 }}>中速</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this._select_Gear(3)} style={{ backgroundColor: this.state.airCtrlInfo.airRunInfo.gear === 3 ? Colors.mainColor : 'white', borderWidth: this.state.airCtrlInfo.airRunInfo.gear === 3 ? 0 : 1, borderColor: '#F7F7F7', width: 115, height: 40, justifyContent: 'center', alignItems: 'center', borderRadius: 5, marginRight: 30 }}>
                    <Text style={{ fontSize: 20 }}>高速</Text>
                </TouchableOpacity>
            </View>
        )
    }


    _selectWeek = (value) => {
        this.setState((preState) => {
            if (underscore.contains(preState.airCtrlInfo.week, value)) {
                preState.airCtrlInfo.week = underscore.without(preState.airCtrlInfo.week, value)
            } else {
                preState.airCtrlInfo.week.push(value)
            }
            return { airCtrlInfo: preState.airCtrlInfo }
        })
    }
    _containWeek = (value) => {
        let week = this.state.airCtrlInfo.week
        return underscore.contains(week, value)
    }
    _selectTimeType = (value) => {
        this.setState((preState) => {
            preState.airCtrlInfo.airRunInfo.setTimeType = value
            return { airCtrlInfo: preState.airCtrlInfo }
        })
    }
    _render_dingshi = () => {
        return (
            <View style={{ width: '100%', paddingHorizontal: 20, marginVertical: 20 }}>

                <TouchableOpacity onPress={() => this._selectTimeType(0)} style={{ flexDirection: "row",alignItems:'center' }}>
                    <Image source={this.state.airCtrlInfo.airRunInfo.setTimeType === 0 ? require('../Images/check_sel.png') : require('../Images/check_unsel.png')} />
                    <Text style={{ fontSize: 40, marginLeft: 10 }}>星期设定</Text>
                </TouchableOpacity>
                <View style={{ flexDirection: "row", height: 50, alignItems: 'center', marginHorizontal: 50, marginTop: 20 }}>
                    <TouchableOpacity onPress={() => this._selectWeek(1)} style={{ flex: 1, height: '100%', backgroundColor: this._containWeek(1) ? Colors.mainColor : '#F6F6F6', justifyContent: 'center', alignItems: 'center', borderTopLeftRadius: 25, borderBottomLeftRadius: 25 }}>
                        <Text style={{ fontSize: 20, color: this._containWeek(1) ? 'black' : '#7B7B7B' }}>Mon</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this._selectWeek(2)} style={{ flex: 1, height: '100%', backgroundColor: this._containWeek(2) ? Colors.mainColor : '#F6F6F6', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 20, color: this._containWeek(2) ? 'black' : '#7B7B7B' }}>Tue</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this._selectWeek(3)} style={{ flex: 1, height: '100%', backgroundColor: this._containWeek(3) ? Colors.mainColor : '#F6F6F6', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 20, color: this._containWeek(3) ? 'black' : '#7B7B7B' }}>Tue</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this._selectWeek(4)} style={{ flex: 1, height: '100%', backgroundColor: this._containWeek(4) ? Colors.mainColor : '#F6F6F6', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 20, color: this._containWeek(4) ? 'black' : '#7B7B7B' }}>Thur</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this._selectWeek(5)} style={{ flex: 1, height: '100%', backgroundColor: this._containWeek(5) ? Colors.mainColor : '#F6F6F6', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 20, color: this._containWeek(5) ? 'black' : '#7B7B7B' }}>Fri</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this._selectWeek(6)} style={{ flex: 1, height: '100%', backgroundColor: this._containWeek(6) ? Colors.mainColor : '#F6F6F6', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 20, color: this._containWeek(6) ? 'black' : '#7B7B7B' }}>Sat</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this._selectWeek(7)} style={{ flex: 1, height: '100%', backgroundColor: this._containWeek(7) ? Colors.mainColor : '#F6F6F6', justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 25, borderBottomRightRadius: 25 }}>
                        <Text style={{ fontSize: 20, color: this._containWeek(7) ? 'black' : '#7B7B7B' }}>Sun</Text>
                    </TouchableOpacity>
                </View>


                <TouchableOpacity onPress={() => this._selectTimeType(1)} style={{ flexDirection: "row", marginTop: 40,alignItems:'center' }}>
                    <Image source={this.state.airCtrlInfo.airRunInfo.setTimeType === 1 ? require('../Images/check_sel.png') : require('../Images/check_unsel.png')} />
                    <Text style={{ fontSize: 40, marginLeft: 10 }}>日期设定</Text>
                </TouchableOpacity>
                <View style={{ flexDirection: "row", alignItems: 'flex-end', marginHorizontal: 50, marginTop: 20 }}>
                    <View style={{ flex: 1 }}>
                        <Text style={{ fontSize: 18, color: '#7B7B7B' }}>开始日期</Text>
                        <TouchableOpacity onPress={() => this.showDatePicker('date', 1)} style={{ flex: 1, height: 42, marginTop: 10, backgroundColor: '#F6F6F6', justifyContent: 'center', borderRadius: 5 }}>
                            <Text style={{ fontSize: 18, color: 'black', marginLeft: 20 }}>{this.state.sDate}</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={{ fontSize: 18, color: 'black', marginHorizontal: 30, marginBottom: 10 }}>至</Text>
                    <View style={{ flex: 1 }}>
                        <Text style={{ fontSize: 18, color: '#7B7B7B' }}>结束日期</Text>
                        <TouchableOpacity onPress={() => this.showDatePicker('date', 2)} style={{ flex: 1, height: 42, marginTop: 10, backgroundColor: '#F6F6F6', justifyContent: 'center', borderRadius: 5 }}>
                            <Text style={{ fontSize: 18, color: 'black', marginLeft: 20 }}>{this.state.eDate}</Text>
                        </TouchableOpacity>
                    </View>
                </View>


                <TouchableOpacity style={{ flexDirection: "row", marginTop: 40 }}>
                    <Text style={{ fontSize: 40, marginLeft: 10 }}>时间设定</Text>
                </TouchableOpacity>
                <View style={{ flexDirection: "row", alignItems: 'flex-end', marginHorizontal: 50, marginTop: 20 }}>
                    <View style={{ flex: 1 }}>
                        <Text style={{ fontSize: 18, color: '#7B7B7B' }}>开始时间</Text>
                        <TouchableOpacity onPress={() => this.showDatePicker('time', 3)} style={{ flex: 1, height: 42, marginTop: 10, backgroundColor: '#F6F6F6', justifyContent: 'center', borderRadius: 5 }}>
                            <Text style={{ fontSize: 18, color: 'black', marginLeft: 20 }}>{this.state.sTime}</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={{ fontSize: 18, color: 'black', marginHorizontal: 30, marginBottom: 10 }}>至</Text>
                    <View style={{ flex: 1 }}>
                        <Text style={{ fontSize: 18, color: '#7B7B7B' }}>结束时间</Text>
                        <TouchableOpacity onPress={() => this.showDatePicker('time', 4)} style={{ flex: 1, height: 42, marginTop: 10, backgroundColor: '#F6F6F6', justifyContent: 'center', borderRadius: 5 }}>
                            <Text style={{ fontSize: 18, color: 'black', marginLeft: 20 }}>{this.state.eTime}</Text>
                        </TouchableOpacity>
                    </View>
                </View>

            </View>
        )
    }







    _renderSection_two = () => {
        return (
            <View style={{ flex: 1, padding: 20 }}>

                <View style={{ flexDirection: "row", marginBottom: 30, alignItems: 'center' }}>
                    <Image source={require('../Images/icon_yzsd.png')} />
                    <Text style={{ fontSize: 40, color: 'white', marginLeft: 10 }}>阀值设定</Text>
                </View>

                <View style={{ backgroundColor: 'white', width: '100%', borderRadius: 10, alignSelf: 'center', padding: 20 }} >

                    <View style={{ flexDirection: "row", width: '100%', height: 100, alignItems: 'center' }}>
                        <Text style={{ fontSize: 30, fontWeight: 'bold', width: 100 }}>PM2.5</Text>
                        <Text style={{ fontSize: 30, marginLeft: 30, marginRight: 20 }}>高于</Text>
                        <TouchableOpacity onPress={() => this._showModal('PM2high')} style={{ width: 300, flexDirection: 'row', height: 50, backgroundColor: '#F6F6F6', justifyContent: 'space-between', alignItems: 'center', borderRadius: 5, paddingHorizontal: 20 }}>
                            <Text style={{ fontSize: 30, color: 'black' }}>{this.state.ruleInfo ? this.state.ruleInfo.PM2high : 0}</Text>
                            <Text style={{ fontSize: 30, color: '#7B7B7B' }}>μg/m3</Text>
                        </TouchableOpacity>
                        <Text style={{ fontSize: 30, marginLeft: 20 }}>启动新风</Text>
                    </View>

                    <View style={{ flexDirection: "row", width: '100%', height: 100, alignItems: 'center' }}>
                        <Text style={{ fontSize: 30, fontWeight: 'bold', width: 100 }}>CO2</Text>
                        <Text style={{ fontSize: 30, marginLeft: 30, marginRight: 20 }}>高于</Text>
                        <TouchableOpacity onPress={() => this._showModal('CO2high')} style={{ width: 300, flexDirection: 'row', height: 50, backgroundColor: '#F6F6F6', justifyContent: 'space-between', alignItems: 'center', borderRadius: 5, paddingHorizontal: 20 }}>
                            <Text style={{ fontSize: 30, color: 'black' }}>{this.state.ruleInfo ? this.state.ruleInfo.CO2high : 0}</Text>
                            <Text style={{ fontSize: 30, color: '#7B7B7B' }}>μg/m3</Text>
                        </TouchableOpacity>
                        <Text style={{ fontSize: 30, marginLeft: 20 }}>启动新风</Text>
                    </View>


                    <View style={{ flexDirection: "row", width: '100%', height: 100, alignItems: 'center' }}>
                        <Text style={{ fontSize: 30, fontWeight: 'bold', width: 100 }}>TVOC</Text>
                        <Text style={{ fontSize: 30, marginLeft: 30, marginRight: 20 }}>高于</Text>
                        <TouchableOpacity onPress={() => this._showModal('TVOChigh')} style={{ width: 300, flexDirection: 'row', height: 50, backgroundColor: '#F6F6F6', justifyContent: 'space-between', alignItems: 'center', borderRadius: 5, paddingHorizontal: 20 }}>
                            <Text style={{ fontSize: 30, color: 'black' }}>{this.state.ruleInfo ? this.state.ruleInfo.TVOChigh : 0}</Text>
                            <Text style={{ fontSize: 30, color: '#7B7B7B' }}>μg/m3</Text>
                        </TouchableOpacity>
                        <Text style={{ fontSize: 30, marginLeft: 20 }}>启动新风</Text>
                    </View>


                </View>

            </View>
        )
    }



    _showModal = (value) => this.setState({ isModalVisible: true, ruleInfoType: value })
    _hideModal = () => this.setState({ isModalVisible: false })
    _renderModalContent = () => (
        <View style={{ width: '90%', marginTop: 100, alignSelf: 'center', backgroundColor: 'white' }}>
            <Text style={{ fontSize: 16, alignSelf: 'center', marginTop: 20 }}>
                请输入
              </Text>
            <View style={{ height: 44, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', }}>
                <Text style={{ marginLeft: 15, fontSize: 16, color: Colors.graytextColor }}>详细描述 :</Text>
                <TextInput
                    autoFocus={true}
                    style={{ flex: 1, marginLeft: 28, }}
                    fontSize={16}
                    placeholder='请输入'
                    value={this.state.ruleInfo && String(this.state.ruleInfo[this.state.ruleInfoType]) }
                    onChangeText={(value) => this.setState((preState) => {
                        preState.ruleInfo[this.state.ruleInfoType] = value
                        return { ruleInfo: preState.ruleInfo }
                    })
                    } />
            </View>
            <Button
                onPress={this._hideModal}
                style={{ width: '80%', height: 48, alignSelf: 'center', backgroundColor: Colors.mainColor, marginTop: 15, marginBottom: 30, borderWidth: 0, borderRadius: 3 }}
                textStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}>
                确定
            </Button>
        </View>
    )


    render() {
        return (
            <View style={styles.container}>
                <Image source={require('../Images/bg.png')} style={{ width: '100%', height: '100%', position: 'absolute' }} resizeMode='stretch' />
                {this._renderHeader()}
                <ScrollView style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.6)' }}>
                    {this.state.airCtrlInfo && this._renderSection_one()}
                    {/* {this.state.airCtrlInfo && this._renderSection_two()} */}
                    <Button
                        onPress={() => this.doUpdate()}
                        style={{ width: '80%', height: 44, alignSelf: 'center', backgroundColor: Colors.buttonColor, marginTop: 40, marginBottom: 20, borderWidth: 0, borderRadius: 22 }}
                        textStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}>
                        修改
                    </Button>
                </ScrollView>
                <DateTimePickerModal
                    isVisible={this.state.isDatePickerVisible}
                    mode={this.state.DatePickerMode}
                    onConfirm={this.handleConfirm}
                    onCancel={this.hideDatePicker}
                />
                <Modal isVisible={this.state.isModalVisible} animationIn={'zoomInDown'}
                    animationOut={'zoomOutUp'}>
                    <View style={{ flex: 1 }}>
                        {this._renderModalContent()}
                    </View>
                </Modal>
            </View>
        )
    }
}

export default DevicesSetScreen
